<%@ page import="java.util.List" %>
<%@ page import="com.pochogastos.model.Usuario" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="head.jsp"></jsp:include>
<link rel="stylesheet" href="css/gasto.css" type="text/css" media="screen" />
<!--[if gte IE 9]>
<style>
.ie_show { display:block }
.ie_hide { display:none }
</style>
<![endif]-->
</head>
<body>
<jsp:include page="navbar.jsp"></jsp:include>
<% Usuario u = (Usuario)request.getSession().getAttribute("USUARIO"); %>
    <div id="gasto">
        <div class="container">
            <div class="section_header">
                <h3>Mi Perfil</h3>
            </div>
            
        	<div class="row gasto">
        		<p>Datos de su cuenta.</p>
        		<div class="gasto_box">
        		<div class="box">
        		<div class="box_cont">
        			<form action="MiPerfil" method="POST" enctype="multipart/form-data">
        			<span style="color:gray;font-size:16px;">Imagen Perfil</span>
                     <br/>
                    <div class="row form">
                        	<input type="hidden" id="accion" name="accion" value="guardar"/>
                        	<input type="file" name="imagen" id="file" class="hide ie_show" onchange="readURL(this);"/>
                        	<div class="input-append ie_hide">
							  <a class="btn" onclick="$('input[id=file]').click();"><img src="LoadImagen" id="imagenPerfil" alt="Cambiar Imagen" title="Cambiar Imagen" style="border:none;width: 120px" /></a>
							</div>
                     </div>
                     <br/>
                     <span style="color:gray;font-size:16px;">Datos Personales</span>
                     <br/>
                     <hr/>
                     <div>
                     	<input type="text" class="descripcion" id="nombre" name="nombre" placeholder="Usuario" value="<%=u.getUsuario().toString()%>" disabled="disabled"/>
                    </div>
                     <br/>
                     <div>
                     	<input type="text" class="descripcion" id="nombre" name="nombre" placeholder="Nombre" value="<%=u.getNombre().toString()%>" required/>
                     	<input type="email" class="email" id="email" name="email" placeholder="Email" value="<%=u.getMail()%>" required/>
                     	
                    </div>
					<br/>
					<div>
                     	<input type="password" value="" class="descripcion" id="clave" name="clave" value="" placeholder="Password"/>
                     	<input type="text" class="descripcion" id="telefono" name="telefono" placeholder="Telefono" value="<%=u.getPerfil().getTelefono().toString()%>" required/>
                    </div>
                    <div class="row submit">
                        <div class="span8 right">
                            <input type="submit" value="Guardar">
                        </div>
                    </div>
                </form>
        		</div>
        		</div>
        		</div>
        	</div>
        </div>
    </div>

	<jsp:include page="footer.jsp"></jsp:include>
	
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/Placeholders.min.js"></script>
	<script>
	$('input[id=file]').change(function() {
		  $('#pretty-input').val($(this).val().replace("C:\\fakepath\\", ""));
		});
	
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagenPerfil').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
	</script>
</body>
</html>